<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import router from './router';
import { storeA } from '@/piniaStore/storeA'
import {ref} from 'vue'
import {getuser} from './api/getinfo'
let piniaStoreA = storeA()
let transitionName=""
let isHost = ref(piniaStoreA.isHost)
//判断是否登录以及是否是商家
async function fn () {
  if(localStorage.getItem("Usertoken")){
  piniaStoreA.setisNoLogin(false)
  let token = localStorage.getItem("Usertoken")
  let user :any = await getuser(JSON.parse(token as string),false)
  piniaStoreA.user.shopName = user.shopnumber
  piniaStoreA.user.Username = user.username
  piniaStoreA.user.token = user.token
  piniaStoreA.user.Address = user.address
  console.log(user.shopnumber)
  if(user.shopnumber){
    console.log("是商家")
    piniaStoreA.isHost = true
  }
}
}
fn()
let avater = piniaStoreA.imageUrl
if(localStorage.getItem("Useravater")){
  avater =JSON.parse(localStorage.getItem("Useravater")as string) 
}


router.beforeEach((to, from, next) => {
  console.log(to.meta.index)
  if(!localStorage.getItem("Usertoken")){
    if (to.path!='/login') {
    if(to.meta.isNoLogin)
    next('/login')
    else
    next()
  } else 
    next()
  }
  else
  next()
  
})
function usercontent(){
  router.push({
    path:"/usercontent"
  })
}
</script>

<template>
<div id="nav">
    <el-menu
    router
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
  >
    <el-menu-item index="/" style=" font-size:23px">校园外卖平台</el-menu-item>
    <div class="flex-grow"></div>
    <el-menu-item index="/" class="select">主页</el-menu-item>
    <el-menu-item index="/business" class="select" v-if="piniaStoreA.isHost">商家</el-menu-item>
    <el-menu-item index="/about" class="select" >外卖袋</el-menu-item>
    <el-menu-item index="/login" class="select" v-if="piniaStoreA.isNoLogin" >注册/登录</el-menu-item>
    <el-avatar v-else @click="usercontent" style="top: 10px;margin-left: 10px;"  :src="avater" />
  </el-menu>
    <!-- <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/login">Login</router-link> -->
  </div>
  <router-view ></router-view>
</template>

<style scoped>

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .select{
    font-size:18px
  }  
  .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
